// 获取按钮每一张轮播图
const swiperItems = document.querySelectorAll('.swiper-item')

// 获取按钮
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')

// 当前显示的索引号
let index = 3

// 布局
const layout = () => {
    let xStep = 100  // 水平方向的边偏移
    const scaleStep = 0.6  // 相邻元素缩放的倍数
    const opacitytep = 0.4 // 相邻元素透明度的倍数
    const len = swiperItems.length // 轮播图数据的长度

    for (let i = 0; i < swiperItems.length; i++) {
        const item = swiperItems[i]
        const diff = i - index // 计算在显示元素的左边或右边的第几个身位
        const sign = Math.sign(diff) // 取正负值 返回 -1 或 1

        let offsetX = xStep * diff // 计算与当前显示元素的边偏移

        if (i !== index) {
            // 这里是为了兼容边偏移距离过近或者过远的补偿，如果倍数与尺寸设计的好，也可以不必这样写，可以直接使用
            offsetX = offsetX + 100 * sign
        }

        // 计算rotate沿y轴的旋转角度，如果是当前显示的则不旋转，旋转45度
        // sign为负数则逆时针，为正数则顺时针 
        // 注意：记得在样式加入perspective属性，好久没写3d了，上了它的鬼日当，不然没有视距差异
        const rotate = i === index ? 0 : 45 * (-sign)

        // 计算缩放大小，这里一定要取绝对值，不然就是放大了，详细见图形分解
        const scale = Math.pow(scaleStep, Math.abs(diff))

        item.style.transform = `translateX(${offsetX}px) scale(${scale}) rotateY(${rotate}deg)`

        // zIndex的计算与scale同理，可以用任何数值来计算，len可以等于1000，也可以100，主要还是看有没有其他元素层级的影响
        item.style.zIndex = len - Math.abs(diff)

        // opacity的计算也与scale同理
        
        const opacity = Math.pow(opacitytep, Math.abs(diff))
        
        item.style.opacity = opacity
    }
}

// 初始化布局
layout()

// 事件处理，不过多赘述
for (let i = 0; i < swiperItems.length; i++) {
    const item = swiperItems[i]
    item.addEventListener('click', function () {
        index = i
        layout()
    })
}

prev.addEventListener('click', function () {
    index--
    if (index < 0) {
        index = swiperItems.length - 1
    }
    layout()
})

next.addEventListener('click', function () {
    index++
    if (index >= swiperItems.length) {
        index = 0
    }
    layout()
})